<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String str = request.getParameter("imgUrl");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>POS收单运营管理平台</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
        function rotate(id,angle,whence) {  
            var p = document.getElementById(id);  
	  
            // we store the angle inside the image tag for persistence  
            if (!whence) {  
                p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360;  
            } else {  
                p.angle = angle;  
            }  
	  
            if (p.angle >= 0) {  
                var rotation = Math.PI * p.angle / 180;  
            } else {  
                var rotation = Math.PI * (360+p.angle) / 180;  
            }  
            var costheta = Math.cos(rotation);  
            var sintheta = Math.sin(rotation);  
	  
            if (document.all && !window.opera) {  
                var canvas = document.createElement('img');  
	  
                canvas.src = p.src;  
                canvas.height = p.height;  
                canvas.width = p.width;  
	  
                canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')";  
            } else {  
                var canvas = document.createElement('canvas');  
                if (!p.oImage) {  
                    canvas.oImage = new Image();  
                    canvas.oImage.src = p.src;  
                } else {  
                    canvas.oImage = p.oImage;  
                }  
	  
                canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height);  
                canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width);  
	  
                var context = canvas.getContext('2d');  
                context.save();  
                if (rotation <= Math.PI/2) {  
                    context.translate(sintheta*canvas.oImage.height,0);  
                } else if (rotation <= Math.PI) {  
                    context.translate(canvas.width,-costheta*canvas.oImage.height);  
                } else if (rotation <= 1.5*Math.PI) {  
                    context.translate(-costheta*canvas.oImage.width,canvas.height);  
                } else {  
                    context.translate(0,-sintheta*canvas.oImage.width);  
                }  
                context.rotate(rotation);  
                context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height);  
                context.restore();  
            }  
            canvas.id = p.id;  
            canvas.angle = p.angle;  
            p.parentNode.replaceChild(canvas, p);  
        }  
	  
        function rotateRight(id,angle) {  
            rotate(id,angle==undefined?90:angle);  
        }  
	  
        function rotateLeft(id,angle) {  
            rotate(id,angle==undefined?-90:-angle);  
        }  
        
        function change(size){
            var isChange = document.getElementById("isChange").value;
        
	        if(isChange=="0"){
	          isChange="1";
	        }else{
	          size = -size;
	          isChange="0";
	        }
        
		     var imgWidth = document.getElementById("imgId").width;
		     var imgHeight = document.getElementById("imgId").height;
		     document.getElementById("imgId").width = imgWidth+size;
		     document.getElementById("imgId").height = imgHeight+size;
             document.getElementById("isChange").value = isChange;
        
        }
        
 
        
</script>  
      
</head>

<body>

	<div class="subpage">
		<form id="queryUserForm"  method="post">
			
			<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"
				class="query_table">
				
			<tr><td>
			  <input type="button" value="逆时针" name="RotateL" id="RotateL" onclick="rotateLeft('imgId',90);">  
              <input type="button" value="顺时针" name="RotateR" id="RotateR" onclick="rotateRight('imgId',90);"> 
			</td></tr>	

			<tr><td align="center">
			
			<img id="imgId" src="<%=str%>" onclick="change(300)" />
			<input type="hidden" value="0" id="isChange" />
			
			</td></tr>

			</table>
			
		</form>
	</div>
</body>
</html>
